<template>
    <view :class="'container ' + (maskClone ? 'containerShowMask' : 'containerNoMask')" v-if="status" :style="'z-index:' + zIndex">
        <view class="l-bg-class toast-bg" v-if="maskClone"></view>
        <view
            :class="'l-class toast toast-' + (placementClone || 'bottom')"
            :style="
                'padding-top:' +
                ((placementClone || 'bottom') === 'bottom' ? (imageClone || iconClone ? '25rpx' : '') : '') +
                ';position:relative;left:' +
                offsetXClone +
                'rpx;top:' +
                offsetYClone +
                'rpx;margin-bottom:' +
                distance +
                'px'
            "
        >
            <image class="l-image-class toast-icon" v-if="imageClone" :src="imageClone" />
            <l-icon
                :class="'l-icon-class toast-icon toast-icon-' + (iconClone === 'loading' ? 'loading' : '')"
                v-else-if="iconClone && !imageClone"
                :size="iconSizeClone ? iconSizeClone : 60"
                :color="iconColor? iconColor: icon === 'success'? '#'00'C292' :  icon === 'error' ? '#F4516C' : '#ffffff'"
                :name="iconClone"
            />
            <slot v-else />
            <text
                :class="'toast-text l-title-class toast-text-' + placementClone"
                :style="placementClone || 'bottom' === 'bottom' ? (iconClone || imageClone ? 'margin-top:10rpx' : '') : ''"
            >
                {{ titleClone }}
            </text>
        </view>
    </view>
</template>

<script>
import lIcon from '../icon/index';
import lMask from '../mask/index';
import computeOffset from '../behaviors/computeOffset';
import zIndex from '../behaviors/zIndex';
import watchShow from '../behaviors/watchShow';
export default {
    data() {
        return {
            status: false,
            success: '',
            fail: '',
            complete: '',
            distance: '',
            titleClone: '',
            maskClone: false,
            placementClone: '',
            imageClone: '',
            iconClone: '',
            offsetXClone: '',
            offsetYClone: '',
            iconSizeClone: false
        };
    },
    mixins: [computeOffset, zIndex, watchShow],
    externalClasses: ['l-bg-class', 'l-icon-class', 'l-class', 'l-image-class', 'l-title-class '],
    props: {
        show: {
            type: Boolean,
            default: false
        },
        title: String,
        icon: String,
        iconSize: String,
        iconColor: String,
        image: String,
        placement: {
            type: String,
            default: 'bottom'
        },
        duration: {
            type: Number,
            default: 1500
        },
        zIndex: {
            type: Number,
            default: 777
        },
        center: {
            type: Boolean,
            default: true
        },
        mask: {
            type: Boolean,
            default: false
        },
        openApi: {
            type: Boolean,
            default: true
        },
        offsetX: Number,
        offsetY: Number
    },
    watch: {
        icon: function () {}
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    methods: {
        attached() {
            if (this.openApi) {
                this.initToast();
            }
        },

        initToast() {
            uni.lin = uni.lin || {};
            uni.lin.showToast = (e = {}) => {
                const {
                    title: t = '',
                    icon: o = '',
                    image: s = '',
                    placement: i = 'bottom',
                    duration: a = 1500,
                    center: n = true,
                    mask: l = false,
                    success: r = null,
                    complete: c = null,
                    offsetX: h = 0,
                    offsetY: f = 0,
                    iconSize: m = '60',
                    iconColor: p = ''
                } = e;
                this.setData({
                    titleClone: t,
                    iconClone: o,
                    imageClone: s,
                    placementClone: i,
                    durationClone: a,
                    centerClone: n,
                    maskClone: l,
                    success: r,
                    complete: c,
                    offsetYClone: f,
                    offsetXClone: h,
                    iconSizeClone: m,
                    iconColorClone: p
                });
                this.changeStatus();
                return this;
            };
            uni.lin.hideToast = () => {
                this.setData({
                    status: false
                });
            };
        },

        strlen(e) {
            for (var t = 0, o = 0; o < e.length; o++) {
                var s = e.charCodeAt(o);
                if ((s >= '0x0001' && s <= '0x007e') || ('0xff60' <= s && s <= '0xff9f')) {
                    t++;
                } else {
                    t += 2;
                }
            }
            return t;
        },

        doNothingMove() {},

        onMaskTap() {
            if (true !== this.locked) {
                this.setData({
                    fullScreen: 'hide',
                    status: 'hide'
                });
            }
            this.$emit(
                'lintap',
                {
                    detail: true
                },
                {
                    bubbles: true,
                    composed: true
                }
            );
        }
    },
    created: function () {}
};
</script>
<style>
.container {
    position: fixed;
}
.containerNoMask {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.containerShowMask {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999;
}
.container .toast-bg {
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 0;
    left: 0;
}
.container .toast-top {
    flex-direction: column-reverse;
}
.container .toast-right {
    flex-direction: row;
}
.container .toast-bottom {
    flex-direction: column;
}
.container .toast-left {
    flex-direction: row-reverse;
}
.container .toast {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 400rpx;
    min-width: 280rpx;
    min-height: 88rpx;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 12rpx;
    color: #fff;
    font-size: 28rpx;
    line-height: 40rpx;
    box-sizing: border-box;
    padding: 30rpx 50rpx;
    z-index: 999;
}
.container .toast .toast-icon {
    margin-top: 20rpx;
    margin-bottom: 20rpx;
}
.container .toast .toast-icon-loading {
    animation: loading-fadein 1.5s linear 0s infinite;
}
.container .toast .toast-text {
    display: inline-block;
    text-align: center;
}
.container .toast .toast-text-right {
    display: inline-block;
    text-align: center;
    margin-left: 20rpx;
}
.container .toast .toast-text-left {
    display: inline-block;
    text-align: center;
    margin-right: 20rpx;
}
.container .toast .toast-text-top {
    margin-bottom: 10rpx;
}
@keyframes loading-fadein {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
</style>
